<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>制作轮播切换效果</title>
		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			.lunbopic{
				width: 730px;
				height: 454px;
				margin: 0 auto;
				position: relative;
			}
			ul{
				list-style: none;
				position: absolute;
				bottom: 10px;
				width: 730px;
				text-align: center;
				
			}
			li{
				width: 25px;
				height: 25px;
				text-align: center;
				line-height: 25px;
				border-radius: 50%;
				color: white;
				background: #666;
				display: inline-block;
			}
			.nav{
				width: 60px;
				background-color: rgba(0,0,0,.2);
				font-size: 30px;
				text-align: center;
				color: white;
			}
			#leftnav{
				position: absolute;
				bottom:50%;
				left:10px ;
				display: none;
			}
			#rightnav{
				position: absolute;
				bottom:50%;
				right:10px;
				display: none;
			}
			.choice{
				background-color: orange;
			}
		</style>
		<script src="jquery-3.2.1.js"></script>
	</head>
	<body>
		<div class="lunbopic">
			<img src="img/adver01.jpg" id="pic" />
		<ul class="imgnav">
			<li class="choice">1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
			<li>6</li>
		</ul>
		<div class="nav" id="leftnav"><</div>
		<div class="nav" id="rightnav">></div>
		</div>
	</body>
	<script>
//		$(document).ready(function(){
			$(start)
			var timer;
			var i=1;
			function start(){
			$(".lunbopic").mouseenter(function(){
				$("#leftnav,#rightnav").show(300)
				clearInterval(timer);
				
			});
			$(".lunbopic").mouseleave(function(){
				$("#leftnav,#rightnav").hide(300)
				timer=setInterval(changpic,1000);
			});
			
			$("#leftnav").click(function(){
				if(i<=1){
					alert("已经是第一张了")
				}else{
					i--;
					$("#pic").attr("src","img/adver0"+i+".jpg")
					changimgnavcolor()
				}
			});
			$("#rightnav").click(function(){
				if(i>=6){
					alert("已经是最后一张了")
				}else{
					i++;
					$("#pic").attr("src","img/adver0"+i+".jpg")
					changimgnavcolor()
				}
			});
			function changimgnavcolor(){
				$(".imgnav li").removeClass("choice");
				$(".imgnav li:nth-of-type("+i+")").addClass("choice");
			}
			
			timer=setInterval(changpic,2000);
			function changpic(){
				if(i==6){
					i=0;
				}
				$("#rightnav").click();
			}
			
			$(".imgnav li").mousemove(function(){
				i=$(this).index();
				$("#pic").attr("src","img/adver0"+(i+1)+".jpg");
				$(".imgnav li").removeClass("choice");
				$(this).addClass("choice");
			})
		};
	</script>
</html>
